<template>
    <div class="columnsWithKey-set dis-inline-block ml-10" @click.stop>
<!--        <el-button class="reset-primary-btn" size="mini" icon="vxe-icon&#45;&#45;menu" @click="columnsClick"></el-button>-->
        <el-button class="reset-primary-btn" size="mini" @click.stop="columnsClick">过滤</el-button>
        <div ref="dropDownEl" class="columnsWithKey-content" v-if="showColumnsSet">
            <div class="reset-checkbox">
                <div class="border-b-s clearfix">
                    <div class="pull-left">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                        </el-checkbox>
                    </div>
                    <div class="pull-right" @click="closeColumnsSet">
                        <i class="el-icon-error cur-p fs-20"></i>
                    </div>
                </div>
                <div class="columnsWithKey-list pt-5 pb-5 border-b-s text-l">
                    <el-checkbox-group v-model="checkedColumns" @change="handleCheckedColumnsChange">
                        <el-checkbox
                                v-for="(item, index) in columnsWithKey"
                                :disabled="item.noColumnsSet"
                                :class="['dis-block', {'disCheck': item.noColumnsSet}]"
                                :label="item.cusKey"
                                :key="index">
                            <div v-if="item.type === 'checkbox'">选择框</div>
                            <div v-else>
                                {{item.title}}
                            </div>
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <div class="columnsWithKey-footer clearfix height-14 line-height-14">
                <div class="pull-left cur-p text-c color-grey" @click="submitColumnsReset">确认</div>
                <div class="pull-left cur-p text-c color-grey" @click="resetColumnsSet">还原</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {prefix} from '../config';
    export default {
        name: `${prefix}ColumnsSet`,
        props: {
            columns: {
                type: Array,
                default() {
                    return [];
                }
            },
            defaultCheckedColumns: {
                type: Array,
                default() {
                    return [];
                }
            },
        },
        data() {
            return {
                checkAll: false,
                columnsWithKey:[],
                checkedColumns: [],
                isIndeterminate: false,
                showColumnsSet: false
            };
        },
        created() {
            this.updateColumnsWithKey(this.columns);
            // let columnsWithKey = this.columns.filter(item => item.visible !== false);
            // this.columnsWithKey = columnsWithKey.map((item,idx)=>{
            //     return {
            //         cusKey: idx,
            //         ...item
            //     };
            // });
        },
        mounted() {
            document.addEventListener('click', (e)=> {
                let dropDownEl = this.$refs['dropDownEl'];
                let dropDownBtn = this.$refs['dropDownBtn'];
                if (e.target !== dropDownEl && e.target !== dropDownBtn) {
                    this.showColumnsSet = false;
                }
            });
        },
        methods: {
            updateColumnsWithKey (val) {
                let columnsWithKey = val.filter(item => item.visible !== false);
                this.columnsWithKey = columnsWithKey.map((item,idx)=>{
                    return {
                        cusKey: idx,
                        ...item
                    };
                });
            },
            columnsClick() {
                if (this.showColumnsSet) {
                    return;
                }
                this.showColumnsSetFn();
            },
            showColumnsSetFn() {
                this.showColumnsSet = true;
                let defaultCheckedColumns = this.defaultCheckedColumns.filter(item => item.visible !== false);
                this.checkedColumns = defaultCheckedColumns.map((item, idx) => item.cusKey || idx);
                this.isIndeterminate = (this.checkedColumns.length === this.columnsWithKey.length) ? false : this.checkedColumns.length > 0;
                this.checkAll = this.checkedColumns.length === this.columnsWithKey.length;
            },
            compare(arg){
                return (a, b)=> {
                    return a[arg] - b[arg];
                };
            },

            submitColumnsReset() {
                let temArr = [];
                let {columnsWithKey} = this;
                this.checkedColumns.forEach((item) => {
                    temArr.push(columnsWithKey[item]);
                });
                temArr = temArr.sort(this.compare('cusKey'));
                this.showColumnsSet = false;
                this.$emit('checkedColumns', [...temArr]);
            },

            resetColumnsSet() {
                this.handleCheckAllChange(this.columnsWithKey);
            },

            handleCheckAllChange(val) {
                let disColumns = this.columnsWithKey.filter(item => item.noColumnsSet) || [];
                this.checkedColumns = val ?  this.columnsWithKey.map((item) => item.cusKey): disColumns.map(item => item.cusKey);
                this.checkAll = this.checkedColumns.length === this.columnsWithKey.length;
                this.isIndeterminate = (this.checkedColumns.length === this.columnsWithKey.length) ? false : this.checkedColumns.length > 0;
            },

            handleCheckedColumnsChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.columnsWithKey.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.columnsWithKey.length;
            },

            closeColumnsSet () {
                this.showColumnsSet = false;
            }
        },
    };
</script>

<style scoped lang="scss">
    .columnsWithKey-set {
        position: relative;
        .columnsWithKey-content {
            position: absolute;
            padding: 10px 10px 5px;
            width: 160px;
            z-index: 999;
            background: #fff;
            right: 0;
            top: 33px;
            border: 1px solid #ccc;

            .columnsWithKey-list {
                max-height: 300px;
                overflow-y: scroll;
                /deep/ .disCheck{
                    span{
                        color: #C0C4CC!important;
                    }
                    .el-checkbox__inner{
                        background-color: #eee!important;
                        border-color: #C0C4CC!important;
                    }
                }
                .el-checkbox{
                    height: 22px;
                    line-height: 22px;
                }
            }

            .columnsWithKey-footer {
                div {
                    width: 49%;

                    &:hover {
                        color: $main-color;
                    }
                }
            }
        }
    }
</style>
